<template>
	<view class="body p20" style="background-image: url(/static/image/bg.jpg)">
		<scroll-view scroll-x class="f28 menu d-s-c">
			<view class="item mr60 p10 d-c-c br-50" :class="index==data.active?'active':''"
				v-for="(item,index) in data.menu" :key="index" @click="setAct(index)">{{item}}</view>
		</scroll-view>
		<view class="sub mt60 f28">本月出勤天数: 21天</view>
		<view class="dmenu d-b-c tc">
			<view class="item" v-for="(item,index) in data.dmenu" :key='index'>
				<view class="num br-50 d-c-c f60 fb">{{item.num}}</view>
				<view class="name f28 mt10">{{item.name}}</view>
			</view>
		</view>
		<view class="list bg-white br30 p30 mt40">
			<view class="item line pt20 pb20" v-for="(item,index) in data.list" :key="index">
				<view class="title fb f36 pl40" :class="item.status==1?'s1':item.status==2?'s2':'s3'">{{item.name}}</view>
				<view class="clist mt20">
					<view class="citem sub f28 mt10" v-for="(e,i) in item.item" :key="i">
						{{e.date}}
						<text v-if="e.cur"> 打卡时间: {{e.cur}}</text>
						<text v-else class="red">未打卡</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from "vuex"
	import { timeFormat } from '@/uni_modules/uview-plus';
	const store = useStore()
	const data = reactive({
		menu: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
		active: 0,
		dmenu: [{
			name: "迟到",
			num: 3
		}, {
			name: "早退",
			num: 2
		}, {
			name: "缺卡",
			num: 1
		}],
		list: [{
			name: "迟到",
			status: 1,
			item: [{
				date: '2022-09-12（周二）',
				cur: '09:03'
			}, {
				date: '2022-09-11（周一）',
				cur: '09:03'
			}, {
				date: '2022-09-28（周四）',
				cur: '09:40'
			}]
		}, {
			name: "早退",
			status: 2,
			item: [{
				date: '2022-09-12（周二）',
				cur: '09:03'
			}, {
				date: '2022-09-11（周一）',
				cur: '09:03'
			}]
		}, {
			name: "缺卡",
			status: 3,
			item: [{
				date: '2022-09-12（周二）',
			}, {
				date: '2022-09-11（周一）',
			}]
		}]
	})

	function setAct(i) {
		data.active = i
	}
</script>
<style scoped lang="scss">
	.title {
		position: relative;

		&:before {
			content: '';
			width: 15px;
			height: 15px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			border-radius: 50%;
		}
	}

	.s1:before {
		background-color: #fadf01;
	}

	.s2:before {
		background-color: #7f6dd8;
	}

	.s3:before {
		background-color: #e99905;
	}

	.dmenu {
		.num {
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			background-color: #b4e3fa;
		}
	}

	.menu {
		display: flex;
		white-space: nowrap;

		.item {
			display: inline-flex;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.active {
			background-color: #0cb0ee;
			color: #fff;
		}
	}
</style>